<template>
  <div class="blm-deep-searching-contain">
    <div class="blm-deep-searching-bg">
      <div class="search-step" @click="showSearchHandle">
        <div class="search-step-title">
            <!-- <img
            class="searh-overall-logo"
            :src="
              session.blmOpts.answerSatge === ANSWER_STAGE.ANSWERED
                ? searhOverallList[thinkingToSwitc]
                : searhOverallLogoAni[thinkingToSwitc]
            "
            :alt="
              session.blmOpts.answerSatge === ANSWER_STAGE.ANSWERED
                ? 'loaded'
                : 'loading'
            "
          /> -->
   
<img
  class="searh-overall-logo"
  :src="
    session.blmOpts.answerSatge === ANSWER_STAGE.ANSWERED
      ? (thinkingToSwitc == 1 
          ? require('@/assets/images/znCheck2.png')
          : require('@/assets/images/znCheck3.png'))
      : (thinkingToSwitc == 1
          ? require('@/assets/images/loadingdeep.gif')
          : require('@/assets/images/deepsk.gif'))
  "
  :alt="
    session.blmOpts.answerSatge === ANSWER_STAGE.ANSWERED
      ? 'loaded'
      : 'loading'
  "
/>

      
 <!-- {{
      session.blmOpts.answerSatge === ANSWER_STAGE.THINKING
        ? `${tabIndex === 0 ? '智能调度' : tabIndex === 1 ? '快速推理' : '深度思考'} 模型正在为您生成答案`
        : session.blmOpts.answerSatge === ANSWER_STAGE.ANSWERED
        ? "答案生成完成"
        : "正在为你生成答案"
    }} -->
        {{
      session.blmOpts.answerSatge === ANSWER_STAGE.THINKING
        ? `${ thinkingToSwitc == 1 ? '快速推理' :thinkingToSwitc == 2 ?'深度思考':''} 模型正在为您生成答案`
        : session.blmOpts.answerSatge === ANSWER_STAGE.ANSWERED
        ? "答案生成完成"
        : "正在为你生成答案"
    }}
        </div>
        <img
          :class="{ 'arrow-up': showSearch }"
          class="arrow"
          :src="arrow_right"
          alt
        />
      </div>
    </div>

    <div v-show="showSearch" class="blm-deep-searching-bg p-10">
      <div v-for="(stageItem, index) in renderData" :key="index">
        <div class="blm-searching-contain">
          <div class="blm-searching-loading">
            <div class="searching-loader" v-if="!stageItem.end"></div>
            <div class="searching-check-unequal" v-else></div>
          </div>
          <p class="search-stage-title">
            {{
              thinkingStatusText[
                `${stageItem.status}${stageItem.end ? "End" : "Start"}Text`
              ]
            }}
          </p>
        </div>
        <div
          class="search-content"
          :class="[stageItem.status]"
          v-if="
            stageItem.status === thinkingStatic.thinking ||
            stageItem.status === thinkingStatic.searchCommands
          "
          v-html="stageItem.htmlContent"
        ></div>
        <div class="search-content" :class="[stageItem.status]" v-else>
          {{ stageItem.status === thinkingStatic.begin ? "" : stageItem.label }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    content: {
      type: Array,
      default() {
        return [];
      },
    },
    isSearching: {
      type: Boolean,
      default: true,
    },
      tabIndex: {
      type: [String,Number],
      default: 0,
    },
    thinkingToSwitc: {
      type: [String,Number],
      default: 0,
    },
    
    session: Object,
  },
  data() {
    return {
      showSearch: true,
      ANSWER_STAGE: window.chatSseSdk.ANSWER_STAGE,
      thinkingStatic: window.chatSseSdk.thinkingStatic,
      thinkingStatusText: {
        initialText: "我将按以下步骤回答该问题",
        beginStartText: "问题分析中",
        beginEndText: "问题分析完成",
        thinkingStartText: "关键数据检索中",
        thinkingEndText: "关键数据检索完成",
        deepThinkingStartText: "开启深度反思模式",
        deepThinkingEndText: "深度反思完成",
        searchCommandsStartText: "补充查询数据和资料中",
        searchCommandsEndText: "补充查询数据和资料完成",
        ongoingStartText: "正在为你生成答案",
        endEndText: "答案生成完成",
      },
      arrow_right: require("@/assets/images/standard/arrow-down.png"),
     ///searhOverallList:thinkingToSwitc==1?require("@/assets/images/znCheck1.png"):require("@/assets/images/znCheck3.png"),
      //searhOverallLogoAni:thinkingToSwitc==1?require("@/assets/images/zndu.gif"):require("@/assets/images/deepsk.gif"),

      //  searhOverallList:[require("@/assets/images/znCheck1.png"),require("@/assets/images/znCheck3.png"),require("@/assets/images/znCheck3.png")],
      //第一个换成智能调度的gif 第三个换成深度的gif
      //  searhOverallLogoAni:[require("@/assets/images/zndu.gif"),require("@/assets/images/deepsk.gif"),require("@/assets/images/deepsk.gif")]
    };
  },
  computed: {
    renderData() {
      const stageContent = [];
      const stageContentStatus = {};
      this.content.forEach((element) => {
        if (element.status) {
          if (
            element.status === this.thinkingStatic.ongoing ||
            element.status === this.thinkingStatic.end
          ) {
            element.label = "";
          }
          if (!stageContentStatus[element.status]) {
            stageContentStatus[element.status] = true;
            if (stageContent.length > 0) {
              stageContent[stageContent.length - 1].end = true;
            }
            if (element.status === this.thinkingStatic.end) {
              const index = stageContent.findIndex(
                (item) => item.status === this.thinkingStatic.ongoing
              );
              stageContent.splice(index, 1);
            }
            stageContent.push({
              end: element.status === this.thinkingStatic.end ? true : false,
              ...element,
              status: window.chatSseSdk.thinkingStatus[element.status],
              htmlContent:
                element.status === this.thinkingStatic.thinking ||
                element.status === this.thinkingStatic.search_commands
                  ? `<div class="search-stage-list-item">${element.label}</div>`
                  : "",
            });
          } else {
            if (
              element.status === this.thinkingStatic.thinking ||
              element.status === this.thinkingStatic.search_commands
            ) {
              stageContent[
                stageContent.length - 1
              ].htmlContent += `<div class="search-stage-list-item">${element.label}</div>`;
            } else {
              stageContent[stageContent.length - 1].label += element.label;
            }
          }
        }
      });
      return stageContent;
    },
  },
  watch: {
    "session.blmOpts.showStep": function (n) {
      if (n) {
        this.showSearch = false;
      }
    },
  },
  methods: {
    showSearchHandle(e) {
      this.showSearch = !this.showSearch;
      e.stopPropagation();
    },
  },
};
</script>
<style scoped lang="less">
@import (once) "@/styles/variable.less";
.blm-deep-searching-contain {
  padding: 10px;
  background: @white-color-1;
  // border-radius: 10px 10px 0 0;
  margin-top: 0px;
  border-radius: 2px 12px 0px 0px;
}
.blm-deep-searching-bg {
  padding: 10px 10px 5px;
  // border-radius: 0 0 10px 10px;
  background-color: #f3f4fa;
  // background-color: @white-color-4;
}
.blm-searching-contain {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}
.blm-searching-loading {
  width: 10px;
  height: 13px;
  padding-left: 6px;
  padding-top: 3px;
  background: #4c83fc;
  border-radius: 16px;
  flex-shrink: 0;
  margin-right: 6px;
}
.searching-loader {
  margin-top: 0px;
  border: 2px solid @white-color-1;
  border-radius: 50%;
  // border-top: 2px solid @primary-2;
  border-top: 2px solid #4c83fc;
  width: 6px;
  height: 6px;
  -webkit-animation: spinner 1.5s linear infinite;
  animation: spinner 1.5s linear infinite;
  margin-left: -3px;
}
@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.searching-check-unequal {
  width: 3px;
  height: 7px;
  border-color: @white-color-1;
  border-style: solid;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.arrow {
  width: 16px;
  vertical-align: text-bottom;
  margin-right: 2px;
  margin-left: 5px;
}
.arrow-up {
  transform: rotatez(180deg);
}
.search-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 6px;
  color: #313232;
  font-weight: 800;

  // color: @primary-2;
}
.search-step-title {
  display: flex;
  align-items: center;
  .searh-overall-logo {
    width: 20px;
    margin-right: 15px;
    vertical-align: middle;
  }
}

.search-content {
  border-left: 1px solid #4c83fc;
  padding-left: 16px;
  margin-left: 5px;
  color: #595959;
  margin-bottom: 6px;
}
.search-stage-title {
  font-weight: bold;
}
.search-content.begin {
  height: 10px;
}
</style>
<style lang="less">
@import (once) "@/styles/variable.less";
.search-stage-list-item {
  position: relative;
  line-height: 1.5;
}
// .search-stage-list-item::before {
//   content: " ";
//   display: inline-block;
//   width: 4px;
//   height: 4px;
//   border-radius: 4px;
//   background: @black-color-6;
//   font-size: 0px;
//   position: absolute;
//   left: -8px;
//   top: 8px;
// }
</style>